<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="shortcut icon" href="#"/>

    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

</head>
<body>
<div class="container">
    <div class="row col-md-10 col-md-offset-1">
        <table class="table table-bordered table-hover" style="margin-top: 30px">
            <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工年龄</th>
                <th>员工密码</th>
                <th>出生日期</th>
                <th>员工邮箱</th>
                <th>员工地址</th>
            </tr>
            </thead>
            <tbody id="tbb">
            </tbody>
            <tfoot id="page"></tfoot>
        </table>
        <input type="hidden" id="pageNum" value="1"/>
    </div>

    <script type="text/javascript">
        //获取数据
        function getData(pageNum) {
            if (pageNum == "null" || pageNum < 0) {
                pageNum = 1;
            }
            //name=张三&age=18&salary=100.9
            $.post("/person","method=getAll&pageNum=" + pageNum,function (result) {
                //防止数据追加,清除数据
                $("#tbb").empty();
                if (result == null) {
                    $("#tbb").append("<tr><td colspan='8'>暂无数据</td></tr>")
                } else {
                    //解析接收的数据
                    alert(result);
                    var data = JSON.parse(result);
                    var personList = data.list;
                    for (var i = 0; i < personList.length; i++) {
                        $("#tbb").append("<tr>" +
                            "<td>" + personList[i].id + "</td>" +
                            "<td>" + personList[i].name + "</td>" +
                            "<td>" + personList[i].age + "</td>" +
                            "<td>" + personList[i].password + "</td>" +
                            "<td>" + personList[i].bornDate + "</td>" +
                            "<td>" + personList[i].email + "</td>" +
                            "<td>" + personList[i].address + "</td>" +
                            "</tr>");
                    }
                    //设置分页条
                    //获取分页数据
                    // var page = data.page;
                    $("#pageNum").val(data.pageNum);
                    //防止叠加,清空分页条数据
                    $("#page").empty();
                    var fenye = " <tr>" +
                        "<td colspan='8' align='center'>" +
                        "<nav aria-label=\"Page navigation\">" +
                        //   设置页码样式class='pagination'--->方框 class="pager"--->椭圆
                        "  <ul class='pagination'>" +
                        "    <li><a href='javascript:getData(1)'>首页</a></li>";

                    for (var i = 1; i <= data.pages; i++) {
                        if (data.pageNum == i) {
                            fenye += "<li class='active'>";
                        } else {
                            fenye += "<li>";
                        }
                        fenye += "             <a href='javascript:getData(" + i + ")' aria-label='Previous'>" +
                            "        <span aria-hidden='true'>" + i + "</span>" +
                            "    </a>" +
                            "</li>"
                    }

                    fenye += "    <li><a href='javascript:getData(" + (data.pages) + ")'>尾页</a></li>" +
                        "  </ul>" +
                        "</nav>" +
                        "</td>" +
                        "</tr>";
                    $("#page").append(fenye);
                }
            });
        }

        //页面加载,即调用方法展示数据
        $(function () {
            //调用获取数据的函数,默认加载第一页
            getData(1);
        });
    </script>
</div>
</body>
</html>